<template>
  <div>
    <div class="w">
      <div class="header-my">
        <div @click="signOut" class="return">
          <span class="iconfont icon-jiantouzuo"></span>
        </div>
        <div class="more">
          <span class="iconfont icon-qita"></span>
        </div>
      </div>

      <div class="my-img">
        <img :src="establishlist.picture" width="100%" alt="" />
      </div>

      <div class="my-title">
        <h2>{{establishlist.foodName}}</h2>
      </div>

      <div class="my-user">
        <div class="myImg">
          <img src="../assets/img/touxiang.jpg" width="42px" alt="" />
        </div>
        <div class="user-name">
          <p>ysjx</p>
          <p>{{establishlist.times}}</p>
        </div>
      </div>

      <div class="my-materials">
        <div class="materials-son">用料</div>
        <div class="materials-btn">
          <!-- js功能 -->
          <button>换算</button>
        </div>
      </div>
    </div>

    <div class="my-material">
      <ul>
        <li class="main">材料</li>
        <li v-for="(item,index) in establishlist.yongl" :key="index">
          <span>{{item.shicai}}</span>
          <span>{{item.yongliang}}</span>
        </li>
      </ul>
    </div>

    <div class="my-step">
      <ul>
        <li v-for="(item,index) in establishlist.buzhou" :key="index">
          <div class="step-title">
            <p>步骤{{index+1}}</p>
          </div>
          <div class="step-img">
            <img :src="item.filesUrl" alt="" />
          </div>
          <div class="step-describe">
            <p>{{item.buzhouText}}</p>
          </div>
        </li>
      </ul>
      <div class="times">
        <p>菜谱创建时间：{{establishlist.times}}</p>
      </div>
    </div>

    <div class="baikuai"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        establishlist:null,
    };
  },
  methods: {
    signOut() {
      this.$emit("signOut");
      this.$router.push({
        path: "personalView"
      });
    },
  },
  created(){
    this.establishlist=JSON.parse(window.localStorage.getItem("establishlist")).filter(item=>{
        return item.id==this.$route.query.id
    })[0]
    console.log(this.establishlist);
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/myCaidan.scss";
</style>